<template>
  <div class="o-aux-panel" :style="showAnimation">
    <div class="back" @click="close"></div>
    <div class="front">
      <div class="box">
        <div class="header">
          <span>{{ title }}</span>
          <div class="close-btn" @click="close">
            <Icon type="ios-close" />
          </div>
        </div>
        <div class="main">
          <o-base-form :mode="2" ref="form"></o-base-form>
        </div>
        <div class="bottom">
          <Button type="primary" @click="confirm">
            <!-- 确定 -->
            {{ $srv.getI18nByPath('others.ok') }}
          </Button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import oBaseForm from '@/components/base/grid/o-base-form/index.vue';
import { Prop, Component, Vue } from 'vue-property-decorator';
import { Tsrv, ifs } from '@/services';

@Component
export default class oAuxPanel extends Vue {
  @Prop({
    required: true
  })
  config: any;

  @Prop({
    required: true
  })
  id: string;

  private showAnimation = {};

  private title = '';

  private form = null;

  private params = {};

  mounted() {
    this.show(this.config);
    this.form = this.$refs.form as oBaseForm;
  }

  private init(data) {
    this.title = Tsrv.getI18nBySrv(data.field);
    const pattern = new RegExp(/\$\(([^)]*)\)/);
    const fieldName = data.options.column.match(pattern)[1];
    const fieldValue = data.row[fieldName];
    const id = data.row['id'] || 0;
    const params = {
      id,
      fieldName,
      fieldValue,
      funName: data.funName
      // guid: data.row['FGUID'] || null
    };
    this.params = params;

    params['spName'] = '_sys_p_ICItemProp_Open';
    Tsrv.standardPostReq<ifs.I_setDataRes, any>(params, Tsrv.url.fun)
      .then(([res, err]) => {
        if (res.success) {
          this.form.init({
            formStyle: {
              columnNum: 1
            },
            formColumns: res.data.tableColumns.map(el => {
              el.isShow = true;
              return el;
            })
          });
          this.form.setFormData(res.data.rows);
          this.form.setModify(true);
        }
      })
      .catch(e => {
        console.error(e);
      });
  }

  private close() {
    const that = this;
    this.showAnimation = {
      opacity: 0,
      // 'z-index': 102 + this.id
      'z-index': 202 + this.id
    };
    setTimeout(() => {
      this.$bus.$emit(`modal_${this.id}`, null);
    }, 200);
  }

  private show(data) {
    const that = this;
    this.showAnimation = {
      // 'z-index': 102 + this.id
      'z-index': 202 + this.id
    };
    this.init(data);
    setTimeout(() => {
      that.showAnimation = {
        opacity: 1,
        // 'z-index': 102 + this.id
        'z-index': 202 + this.id
      };
    }, 10);
  }

  private confirm() {
    this.form
      .validate()
      .then(() => {
        const data = this.form.getFilterData({
          hasEmpty: true,
          hasM2o: true
        });
        const rows = {};
        data.forEach(el => {
          rows[el.field] = el.value;
        });
        const params = this.params;
        params['rows'] = rows;
        params['spName'] = '_sys_p_ICItemProp_Open';
        Tsrv.standardPostReq<ifs.I_setDataRes, any>(params, Tsrv.url.fun)
          .then(([res, err]) => {
            if (res.success) {
              this.$bus.$emit(`modal_${this.id}`, res.data.data);
              this.close();
            } else {
              // this.$msg("获取数据失败");
              this.$msg(Tsrv.getI18nByPath('oAuxPanel.failedtogetdata'));
            }
          })
          .catch(e => {
            console.error(e);
          });
      })
      .catch(() => {
        // this.$msg("表格内容格式不正确或未填写完全");
        this.$msg(Tsrv.getI18nByPath('oAuxPanel.formatfaild'));
      });
  }
}
</script>

<style scoped lang="scss">
.o-aux-panel {
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transition: ease-in-out 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  .back {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
  }
  .front {
    position: absolute;
    width: 330px;
    height: 500px;
    top: 50%;
    left: 50%;
    margin: -250px -165px;
    .box {
      width: 100%;
      height: 100%;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      border-radius: var(--border-radius-model);
      overflow: hidden;
      .header {
        width: 100%;
        position: relative;
        height: 48px;
        background-color: rgba(244, 244, 244, 1);
        border-bottom: 1px solid #eee;
        padding: 0 20px;
        z-index: 11;
      }
      .main {
        width: 100%;
        flex: 1;
        overflow: hidden;
        padding: 10px 20px;
      }
      .bottom {
        height: 60px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px;
        background-color: #f4f4f4;
        border-top: 1px solid #eee;
      }
    }
  }
}
.header {
  span {
    font-size: 14px;
    font-weight: bold;
    line-height: 46px;
    color: #666;
  }
  .close-btn {
    position: absolute;
    right: 20px;
    top: 10px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: #666;
    .ivu-icon {
      font-size: 28px;
      font-weight: bold;
    }
  }
}
</style>
